<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

<script>
    $(function () {
        var pq = {};
        pq.countries = [
            { id: "CA", name: "Canada", regions: "Alberta|British Columbia|Manitoba|New Brunswick|Newfoundland|Northwest Territories|Nova Scotia|Nunavut|Ontario|Prince Edward Island|Quebec|Saskatchewan|Yukon Territory" },
            { id: "VI", name: "Virgin Islands, U.S.", regions: "St. Thomas|St. John|St. Croix" }
        ];

        var colM = [
            { title: "Ship Country", dataIndx: "country", width: 200,
                editor: {
                    type: "select",
                    mapIndices: { name: "country", id: "id" },
                    labelIndx: "name",
                    valueIndx: "id",
                    prepend: { "": "" },
                    options: pq.countries
                }
            },
            { dataIndx: "region", title: "Region", width: 200,
                editor: {
                    type: "select",
                    prepend: { "": "" },
                    options: function (ui) {
                        var countries = pq.countries,
                            id = ui.rowData.id;

                        if (id) {
                            //iterate through the countries list to find the matching record.
                            for (var i = 0; i < countries.length; i++) {
                                var row = countries[i];
                                
                                if (row.id == id) {//match found.
                                    return row.regions.split("|");
                                }
                            }
                        }
                        return [];
                    }
                }
            },
            { dataIndx: "id", hidden: true }
		];
        var dataModel = {
            data: [
                {},
                { id: "VI", country: "Virgin Islands, U.S." },
                {},
                { id: "CA", country: "Canada" }
            ]
        }
        $("div#grid_select").pqGrid({
            height : 'flex',
            colModel: colM,
            dataModel: dataModel,
            editModel: { 
                keyUpDown: false,
                clicksToEdit: 1 
            },
            title: "Cascading Select Lists",
            pasteModel: {on: false},
            cellSave: function (evt, ui) {
                if (ui.dataIndx == "country" && ui.newVal.id !== ui.oldVal.id) {      

                    //reset the region cell whenever country cell is modified.              
                    $(this).pqGrid('updateRow', { rowIndx: ui.rowIndx,
                        row: { 'region': '' }
                    });

                }
            }
        });
    });
        
</script>    
</head>
<body>

<div id="grid_select" style="margin:auto;"></div>

</body>

</html>
